<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
      .loading {
        position: absolute;
        top: 50%;
      }
    </style>
  </head>
  <body>
    <div id="loading">
      <svg width="50" height="50" viewBox="0, 0, 50, 50">
        <circle cx="25" cy="25" r="20" stroke="red" stroke-width="5" fill="transparent" />
      </svg>
      <p>loading...</p>
      <button onclick="notifyMe()">Notify me!</button>
    </div>
    <div id="app"></div>
    <script>
      (function() {
        const { rtt, downlink, effectiveType, saveData } = navigator.connection;
        console.log(`当前使用的 ${effectiveType} 网络下载速度是 ${downlink}M/s, 预计需要加载 ${rtt} s.`);
        document.onreadystatechange = () => {
          if(document.readyState === 'complete') {
            document.querySelector('#loading').style.display = 'none';
          }
        }
      })();
      function notifyMe() {
        console.log(Notification.permission)
        if(window.Notification && Notification.permission !== "denied") {
          Notification.requestPermission(function(status) {
            var n = new Notification('通知标题', { body: '这里是通知内容！' }); 
          });
        }

      }
    </script>
  </body>
</html>
